<template>
  <div>
    <nut-table
      :columns="columns3"
      :data="data2"
      :striped="striped"
      style="overflow-x: auto"
    ></nut-table>
  </div>

  <van-sticky :offset-bottom="0" position="bottom">
    <van-row gutter="20">
      <van-col span="12">
        <van-button type="primary" size="large">清除日期过滤器</van-button>
      </van-col>
      <van-col span="12">
        <van-button type="primary" size="large">清除开停点过滤器</van-button>
      </van-col>
    </van-row>
  </van-sticky>
</template>

<script scope>
import { reactive, toRefs } from "vue";
export default {
  props: {},
  setup() {
    const state = reactive({
      striped: true,
      columns3: [
        {
          title: "日期",
          key: "date",
          stylehead: {
            width: "100px",
          },
        },
        {
          title: "时间",
          key: "time",
          stylehead: {
            width: "100px",
          },
        },
        {
          title: "相对时间",
          key: "tem1",
          stylehead: {
            width: "100px",
          },
        },
        {
          title: "开停点",
          key: "tem2",
          stylehead: {
            width: "100px",
          },
        },
        {
          title: "间隔",
          key: "tem3",
          stylehead: {
            width: "100px",
          },
        },
        {
          title: "工作系数",
          key: "tem4",
          stylehead: {
            width: "100px",
          },
        }
      ],
      data2: [],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scope>
.nut-table {
  display: block;
  overflow: auto;
  max-height: calc(100vh - 220px);
  margin-bottom: 50px;
}

.nut-table__main {
  // display: block;
  table-layout: fixed;
  border: 1px solid #ccc;
  padding: 5px;
  width: 500px;
  height: 500px;
}
.nut-table__main__head {
  display: table-header-group;
  border-bottom: 1px solid #ccc;
}
.nut-table__main__body__tr {
  border-bottom: 1px solid #ccc;
}
.nut-table__main__body__tr__td {
  text-align: center;
}
</style>
